<template>
  <Modal
    v-model="model"
    title="个人信息"
    width="440"
    closable
    mask-closable
    :footerHide="true"
    class="personalInformationModel">
    <div v-if="userStore().info">
      <Form :label-width="90">
        <FormItem label="姓名:">{{ userStore().info.userName }}</FormItem>
        <FormItem label="手机:">
          <span style="margin-right: 20px">{{ userStore().info.phone }}</span>
          <Button type="primary" size="small" @click="onPwd">修改密码</Button>
        </FormItem>
        <FormItem label="人员编号:">{{ userStore().info.workNo }}</FormItem>
        <FormItem label="角色:">{{ userStore().role.roleName }}</FormItem>
      </Form>
    </div>
  </Modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { userStore } from '@/store/user'
  const emits = defineEmits(['editPwd'])
  const model = ref(false)

  function onPwd() {
    model.value = false
    emits('editPwd')
  }

  defineExpose({ show: () => (model.value = true) })
</script>

<style lang="scss" scoped>
  .personalInformationModel {
    .footer {
      text-align: center;

      button {
        width: 80px;
        margin: 0 10px;
      }
    }

    :deep(.ivu-upload-drag) {
      border: none;
    }
  }
</style>
